<!--
  功能：网络接口
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月11日 11:02:38
-->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs" @change=changeController>
    <a-tab-pane :key="index" :tab="item?.name || '未知名称'" v-for="(item, index) in controllerData">
      <a-row v-if="activeKey == index">
        <a-col :span="24">
          <a-button type="link" class="y-btn" @click="openWangKaBangDingModal">
            <template #icon>
              <plus-outlined />
            </template>
            网卡绑定
          </a-button>
          <!-- 弹窗 - 网卡绑定 -->
          <wangKaBangDingModal v-model:visible="visibleWangKaBangDingModal" v-model:cid="activeKey" v-if="visibleWangKaBangDingModal"></wangKaBangDingModal>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-alert banner message="说明: 修改网络参数会重启网络,可能造成数据传输中断或错误,修改时请确保服务停止或未使用!" type="warning" show-icon />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <template #title><span class="y-wangLuoJieKou-title">网络接口</span></template>
            <a-table bordered :data-source="dataSource_wangLuoJieKou" :columns="columns_wangLuoJieKou" class="y-table" :pagination="false">
              <template #bodyCell="{ text, column, record }">
                <template v-if="column.key === 'detail'">
                  <a-image :width="20" :src="detailsOpenPng" :preview="false" @click="openWangKaDetailModal(record)" />
                </template>
                <template v-if="column.key === 'interface'">
                  {{ text }}
                  <a-space>
                    <a-image :width="20" :src="record.link =='yes' ? alivePng : deadPng" :preview="false" />
                    <FormOutlined @click="openWangKaEditModal(record)" />
                  </a-space>
                </template>
                <template v-else-if="column.key === 'onboot'">
                  {{ text == true ? '是' : '否' }}
                </template>
              </template>
            </a-table>
            <!-- 弹窗 - 网卡修改 -->
            <wangKaEditModal v-model:visible="visibleWangKaEditModal" v-model:record="wangKaEditModalRecord" v-if="visibleWangKaEditModal" @loadTable="loadTable"></wangKaEditModal>
            <!-- 弹窗 - 网卡详情 -->
            <wangKaDetailModal v-model:visible="visibleWangKaDetailModal" v-model:record="wangKaEditModalRecord" v-if="visibleWangKaDetailModal"></wangKaDetailModal>
          </a-card>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <template #title><span class="y-wangLuoJieKou-title">光纤通道</span></template>
            <a-table bordered :data-source="dataSource_guangXianTongDao" :columns="columns_guangXianTongDao" class="y-table" :pagination="false"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>
    <!-- 虚拟IP先不做 -->
    <!-- <a-tab-pane key="xuNiIp" tab="虚拟IP" v-if="false">
      <a-row>
        <a-col :span="24">
          <a-button type="link" class="y-btn" @click="openTianJiaXuNiIpModal">
            <template #icon>
              <plus-outlined />
            </template>
            添加虚拟Ip
          </a-button>
          <!~~ 弹窗 - 添加虚拟Ip ~~>
          <tianJiaXuNiIpModal v-model:visible="visibleTianJiaXuNiIpModal"></tianJiaXuNiIpModal>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-alert banner message="说明: 修改网络参数会重启网络,可能造成数据传输中断或错误,修改时请确保服务停止或未使用!" type="warning" show-icon />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <a-table bordered :data-source="dataSource_wangLuoJieKou" :columns="columns_wangLuoJieKou" class="y-table" :pagination="false">
              <template #bodyCell="{ text, column, record }">
                <template v-if="column.key === 'detail'">
                  <a-image :width="20" :src="detailsOpenPng" :preview="false" />
                </template>
                <template v-if="column.key === 'name'">
                  {{ text }}
                  <a-image :width="20" :src="alivePng" :preview="false" />
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>-->
  </a-tabs>

</template>

<script setup>
import detailsOpenPng from '@/assets/images/wangLuoSheZhi/details_open.png'
import alivePng from '@/assets/images/wangLuoSheZhi/alive.png'
import deadPng from '@/assets/images/wangLuoSheZhi/dead.png'
const activeKey = ref(0)
import wangKaEditModal from './modal/wangKaEditModal.vue'
import wangKaDetailModal from './modal/wangKaDetailModal.vue'
import wangKaBangDingModal from './modal/wangKaBangDingModal.vue'
import tianJiaXuNiIpModal from './modal/tianJiaXuNiIpModal.vue'

const visibleWangKaBangDingModal = ref(false)
const visibleWangKaEditModal = ref(false)
const visibleWangKaDetailModal = ref(false)
const visibleTianJiaXuNiIpModal = ref(false)

const wangKaEditModalRecord = ref({})

const openWangKaDetailModal = record => {
  visibleWangKaDetailModal.value = true
  wangKaEditModalRecord.value = record
}
const openWangKaEditModal = record => {
  visibleWangKaEditModal.value = true
  wangKaEditModalRecord.value = record
}
const openWangKaBangDingModal = () => {
  visibleWangKaBangDingModal.value = true
}
const openTianJiaXuNiIpModal = () => {
  visibleTianJiaXuNiIpModal.value = true
}

// 表格列
const columns_wangLuoJieKou = ref([
  {
    title: '详细',
    dataIndex: 'detail',
    key: 'detail',
    align: 'center'
  },
  {
    title: '名称',
    dataIndex: 'interface',
    key: 'interface',
    align: 'center',
    sorter: {
      compare: (a, b) => a.interface.localeCompare(b.interface),
      multiple: 1
    }
  },
  {
    title: '类型',
    dataIndex: 'mode',
    key: 'mode',
    align: 'center',
    sorter: {
      compare: (a, b) => a.mode.localeCompare(b.mode),
      multiple: 2
    }
  },
  {
    title: 'IP地址',
    dataIndex: 'ipaddr',
    key: 'ipaddr',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ipaddr.localeCompare(b.ipaddr),
      multiple: 3
    }
  },
  {
    title: '掩码',
    dataIndex: 'netmask',
    key: 'netmask',
    align: 'center',
    sorter: {
      compare: (a, b) => a.netmask.localeCompare(b.netmask),
      multiple: 4
    }
  },
  {
    title: 'MAC',
    dataIndex: 'hwaddr',
    key: 'hwaddr',
    align: 'center',
    sorter: {
      compare: (a, b) => a.hwaddr.localeCompare(b.hwaddr),
      multiple: 5
    }
  },
  {
    title: '开机启动',
    dataIndex: 'onboot',
    key: 'onboot',
    align: 'center',
    sorter: {
      compare: (a, b) => a.onboot.localeCompare(b.onboot),
      multiple: 6
    }
  }
])

// 表格数据

const dataSource_wangLuoJieKou = ref([])

const columns_guangXianTongDao = ref([
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: 'WWPN',
    dataIndex: 'wwpn',
    key: 'wwpn',
    align: 'center',
    sorter: {
      compare: (a, b) => a.wwpn.localeCompare(b.wwpn),
      multiple: 1
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    sorter: {
      compare: (a, b) => a.status.localeCompare(b.status),
      multiple: 2
    }
  },
  {
    title: '速率',
    dataIndex: 'suLv',
    key: 'suLv',
    align: 'center',
    sorter: {
      compare: (a, b) => a.suLv.localeCompare(b.suLv),
      multiple: 2
    }
  }
])

const dataSource_guangXianTongDao = ref([
  {
    name: 'port1',
    wwpn: '10.10.10.10',
    status: '是',
    suLv: '1000'
  },
  {
    name: 'port2',
    wwpn: '10.10.10.10',
    status: '是',
    suLv: '1000'
  }
])

// 控制器的数据
let controllerData = ref([])
// 获取控制器
const initController = () => {
  controllerData.value = []
  apiWs.controller().subscribe(resp => {
    if (resp && resp.length > 0) {
      for (let i = 0; i < resp.length; i++) {
        let controllerName = resp[i]
        controllerData.value[i] = {
          name: controllerName
        }
      }
      // 获取第一个控制器的表格数据
      getNetworkTable(0, null)
    }
  })
}

// 改变控制器的时候获取表格数据
let changeController = key => {
  // 获取当前控制器的表格数据
  getNetworkTable(key, null)
}

// 获取网络表格
let getNetworkTable = (index, interfce) => {
  dataSource_wangLuoJieKou.value = []
  let params = {
    cid: index,
    user: localStorage.getItem('user'),
    ip: '127.0.0.1',
    interfce: interfce ? [interfce] : []
  }
  apiWs.getNet(params).subscribe(resp => {
    dataSource_wangLuoJieKou.value = resp.interfaces
  })
}
// 加载表格
let loadTable = () => {
  getNetworkTable(activeKey.value, null)
}
onMounted(() => {
  initController() // 加载控制器的接口
})
</script>

<style scoped>
.y-wangLuoJieKou-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}
.ant-row {
  margin-bottom: 10px;
}
</style>